<template>
  <view class="zdzcRecordMain">
    <u-sticky :enable="enable">
      <view class="searchMain solid-bottom">
        <u-search
          placeholder="请输入机具SN号"
          v-model="keyword"
          @search="searchTap"
          @custom="searchTap"
          @change="changeTap"
        ></u-search>
      </view>
    </u-sticky>
    <view class="zdzcRecordBox">
      <view v-if="list.length > 0">
        <view
          :class="item.status == 0 ? 'recordItem fail' : 'recordItem success'"
          v-for="(item, index) in list"
          :key="index"
          @tap="$u.route({ url: '/pages/zdzc/zdzcRecordDetail', params:{id:item.id}})"
        >
          <!-- <view class="outerTitle">{{ item.remark }}</view> -->
          <view class="content">
            <view class="top flex align-center justify-between">
              <view class="left flex align-center">
                <view class="title">
                  <text>批次号</text>
                  <text>(机具号)</text>
                </view>
                <view class="number">
                  <text>{{ item.start }}</text>
                  <view class="flex align-center justify-center">
                    <u-icon
                      class="uIcon"
                      name="arrow-down"
                      color="#333"
                      size="24"
                    ></u-icon>
                  </view>
                  <text>{{ item.end }}</text>
                </view>
              </view>
              <view class="right flex align-center">
                <text>{{ item.nums }}台</text>
                <u-icon
                  class="uIcon"
                  name="arrow-right"
                  color="#333"
                  size="24"
                ></u-icon>
              </view>
            </view>
            <view class="sub solid-top"> 创建时间:{{ item.create_time }} </view>
          </view>
        </view>
      </view>
      <!-- 暂无数据 -->
      <view class="noMachine" v-if="list.length == 0 && isLoad">
        <image
          src="../../static/images/noData/zwjl.png"
          mode="widthFix"
        ></image>
        <text>暂无记录</text>
      </view>
      <u-back-top :scroll-top="scrollTop"></u-back-top>
      <u-toast ref="uToast" />
      <u-loadmore
        :status="status"
        @loadmore="loadmore"
        style="padding: 30rpx 0 30upx"
        v-if="list.length > 0"
      />
      <toast></toast>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      enable: true,
      keyword: "",
      scrollTop: 0,
      page: 1,
      pageNumber: 10,
      noMore: false,
      isLoad: false,
      status: "loadmore",
      list: [],
    };
  },
  onShow() {
    this.enable = true;
    this.list = [];
    this.page = 1;
    this.noMore = false;
    this.isLoad = false;
    this.status = "loadmore";
    this.getOperateListData();
  },
  onHide() {
    this.enable = false;
  },
  onLoad() {},
  methods: {
    searchTap() {
      this.list = [];
      this.page = 1;
      this.noMore = false;
      this.isLoad = false;
      this.status = "loadmore";
      this.getOperateListData();
    },
    changeTap() {
      if (this.keyword.length == 0) {
        this.list = [];
        this.page = 1;
        this.noMore = false;
        this.isLoad = false;
        this.status = "loadmore";
        this.getOperateListData();
      }
    },
    getOperateListData() {
      this.$u.api
        .getOperateList({
          searchKey: this.keyword,
          pageSize: this.pageNumber,
          pageIndex: this.page
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result.list;
            datas.forEach((item) => {
              item.title = item.title.split("->");
              item.start = item.title[0];
              item.end = item.title[1];
            });
            if (this.page == 1 && datas.length == 0) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == this.pageNumber) {
              this.status = "loading";
            }
            this.list = this.list.concat(datas);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
            this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
  },
  // 点击下载更多
  loadmore() {
    if (this.noMore) {
      this.status = "nomore";
    } else {
      this.page = ++this.page;
      this.status = "loadmore";
      this.getOperateListData();
    }
  },
  // 下拉触底
  onReachBottom() {
    if (this.noMore) {
      this.status = "nomore";
    } else {
      this.status = "loading";
      this.page = ++this.page;
      this.getOperateListData();
    }
  },
  onPullDownRefresh() {
    this.list = [];
    this.page = 1;
    this.noMore = false;
    this.isLoad = false;
    this.status = "loadmore";
    this.getOperateListData();
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>
<style lang="scss">
page {
  background: #fff;
}
.searchMain {
  background: #fff;
  padding: 20rpx 30rpx;
}
.zdzcRecordMain {
  .zdzcRecordBox {
    padding: 30rpx;
    .recordItem {
      border: 1rpx solid #f1f1f1;
      border-radius: 10rpx;
      margin-bottom: 30rpx;
      overflow: hidden;
      position: relative;
      &.fail {
        border-color: #f33;
        &::after {
          content: "失败";
          display: block;
          width: 200rpx;
          height: 40rpx;
          line-height: 40rpx;
          background: #f33;
          text-align: center;
          color: #fff;
          font-size: 24rpx;
          position: absolute;
          right: -68rpx;
          bottom: 12rpx;
          transform: rotate(-45deg);
        }
      }
      &.success {
        border-color: rgba(68, 181, 73, 1);
        &::after {
          content: "成功";
          display: block;
          width: 200rpx;
          height: 40rpx;
          line-height: 40rpx;
          background: rgba(68, 181, 73, 1);
          text-align: center;
          color: #fff;
          font-size: 24rpx;
          position: absolute;
          right: -68rpx;
          bottom: 12rpx;
          transform: rotate(-45deg);
        }
      }
      .outerTitle {
        color: #333;
        background: #f1f1f1;
        padding: 20rpx;
        line-height: 40rpx;
      }
      .content {
        padding: 20rpx 40rpx;
      }
      .top {
        .left {
          .title {
            text {
              display: block;
              &:first-of-type {
                position: relative;
                top: -4rpx;
              }
              &:last-of-type {
                font-size: 24rpx;
              }
            }
          }
          .number {
            padding-left: 40rpx;
            > text {
              font-weight: bold;
            }
          }
        }
        .right {
          .uIcon {
            position: relative;
            top: 4rpx;
          }
        }
      }
      .sub {
        margin-top: 20rpx;
        padding-top: 20rpx;
      }
    }
  }
}
</style>